<template>
  <view class="live-header">
    <view class="header-right round">
      <view class="header-image round align-center justify-center bg-white">
        <image class="header-image-img round" :src="sheep.$url.cdn(userInfo.avatar)" />
      </view>
      <view class="header-shop">
        <text class="header-shop-text"> {{ formatEllipsis(userInfo.nickname, 16) }} </text>
        <!-- <view class="header-shop-info">
					<text class="header-shop-info-text">{{ numFormat(online_num) }} 人观看</text>
				</view> -->
      </view>
    </view>

    <view class="header-left">
      <view class="image-box">
        <image :src="item" class="userImage" v-for="(item, index) in userList" :key="index"></image>
      </view>
      <!-- <view class="online_num_box">
				<text class="online_num">{{ numFormat(online_num) }}</text>
			</view> -->
      <view class="wanl-btn" @tap="back()">
        <image src="/static/images/live_close.png" class="close-image"></image>
      </view>
    </view>
  </view>
</template>

<script>
  import sheep from '@/sheep';

  // import wanlshop_config from '@/common/config/config';
  import userstore from '@/sheep/store/user.js';
  import { mapState } from 'pinia';
  export default {
    name: 'LiveHeader',
    props: {
      state: {
        default: 0,
      },
    },
    data() {
      return {
        sheep: sheep,
        online_num: 0,
      };
    },
    computed: {
      ...mapState(userstore, ['userInfo']),
      // ...mapState(['user'])
    },
    mounted() {
      this.getData();
    },
    methods: {
      editOlineNum(num) {
        console.log('go editOlineNum', num);
        this.online_num = num.pv;
        this.userList = num.userlist;
      },
      back() {
        this.$emit('back');
      },
      // 初始化
      async getData() {
        let that = this;
        // let res = await sheep.$api.video.refresh()
        // let url = res.data.userinfo.avatar;
        // let image = url;
        // if ((/^data:image\//.test(url))) {
        // 	image = url;
        // } else if ((/^(http|https):\/\/.+/.test(url))) {
        // 	image = url;
        // } else {
        // 	image = wanlshop_config.cdnurl + url;
        // }

        // res.data.userinfo.avatar = image;
        // this.userInfo = res.data.userinfo;

        /* this.$store.commit('user/setUserInfo', res.data.userinfo); */
        // uni.request({
        // 	url: '/wanlshop/user/refresh',
        // 	method: 'POST',
        // 	success: res => {
        // 		console.log('/wanlshop/user/refresh', res);
        // 		let url = res.data.userinfo.avatar;
        // 		let image = url;
        // 		if ((/^data:image\//.test(url))) {
        // 			image = url;
        // 		}else if((/^(http|https):\/\/.+/.test(url))){
        // 			image = url;
        // 		}else{
        // 			image = wanlshop_config.cdnurl + url;
        // 		}

        // 		res.data.userinfo.avatar = image;
        // 		this.userInfo = res.data.userinfo;

        // 		this.$store.commit('user/setUserInfo', res.data.userinfo);
        // 	}
        // });
      },
      numFormat(num) {
        return num > 9999 ? (num - (num % 1000)) / 10000 + '万' : num;
      },
      formatEllipsis(str = '', limitLen = 24) {
        let len = 0,
          reg = /[\x00-\xff]/, //半角字符的正则匹配
          strs = str.split(''),
          inx = strs.findIndex((s) => {
            len += reg.test(s) ? 1 : 2;
            if (len > limitLen) return true;
          });
        return inx === -1 ? str : str.substr(0, inx) + '...';
      },
    },
  };
</script>

<style>
  .live-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding-top: 16rpx;
    padding-left: 24rpx;
    padding-right: 24rpx;
    /* #ifdef MP */
    padding-right: 220rpx;
    /* #endif */
  }

  .header-right {
    display: flex;
    align-items: center;
    flex-direction: row;
    background-color: rgba(0, 0, 0, 0.2);
    padding-top: 8rpx;
    padding-right: 16rpx;
    padding-bottom: 8rpx;
    padding-left: 8rpx;
    border-radius: 5000upx;
  }

  .header-image {
    width: 68rpx;
    height: 68rpx;
    border-radius: 50%;
  }

  .header-image-img {
    width: 68rpx;
    height: 68rpx;
    border-radius: 50%;
  }

  .header-shop {
    padding-left: 15rpx;
  }

  .header-shop-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 28rpx;
    line-height: 36rpx;
    max-width: 100rpx;
  }

  .header-shop-info-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 20rpx;
  }

  .header-btn {
    background: #f40;
    width: 86rpx;
    height: 50rpx;
    justify-content: center;
    align-items: center;
    border-radius: 18rpx;
    margin-left: 30rpx;
  }

  .header-btn-text {
    color: #fff;
    font-size: 24rpx;
  }

  .close-image {
    width: 50rpx;
    height: 50rpx;
  }

  .onlineBox {
    background: #ffffff;
    height: 50rpx;
    border-radius: 30rpx;
    margin-left: 30rpx;
    padding: 0rpx 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    background: rgba(0, 0, 0, 0.2);
    color: white;
  }

  .header-left {
    display: flex;
    flex-direction: row;
  }

  .image-box {
    display: flex;
    flex-direction: row;
  }

  .userImage {
    width: 58rpx;
    height: 58rpx;
    border-radius: 50%;
    margin-right: 10rpx;
  }

  .online_num_box {
    min-width: 60rpx;
    height: 60rpx;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    color: #ffffff !important;
  }

  .online_num {
    color: #ffffff !important;
    font-size: 26rpx;
  }
</style>
